<template>
	<div class="container" v-loading="loading">
		<div v-for="e in value.productList" class="container_item">
			<el-table :data="[{}]" border>
				<el-table-column
					:label="e.plan.carModelName ? '车型' : '车辆'"
					align="center">
					<template slot-scope="scope">
						<div>
							{{
								e.plan.carModelName || e.plan.carPlateNo || '-'
							}}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="指导价" align="center" width="100px">
					<template slot-scope="scope">
						<div>
							{{ format_thousand(e.plan.carGuidePrice) || '-' }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="租赁期（月）" align="center">
					<template slot-scope="scope">
						<div>{{ e.plan.planTenancyType || '-' }}</div>
					</template>
				</el-table-column>
				<el-table-column label="支付频率" align="center">
					<template slot-scope="scope">
						<div>
							{{
								e.plan.planPaymentFrequencyType
									| planPaymentFrequencyType(
										dict.type
											.quota_plan_payment_frequency_type,
									)
							}}
						</div>
					</template>
				</el-table-column>

				<el-table-column label="起租日期" align="center">
					<template slot-scope="scope">
						<div>
							{{ e.plan.planTimeStart | formatTime(0) || '-' }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="保证金" align="center">
					<template slot-scope="scope">
						<div>
							{{
								format_thousand(
									e.plan.planContractCashdeposit,
								) || '-'
							}}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="首期租金" align="center">
					<template slot-scope="scope">
						<div>
							{{ format_thousand(e.plan.planFirstRent) || '-' }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="每期租金（含税）" align="center">
					<template slot-scope="scope">
						<div>{{ format_thousand(e.plan.planRent) || '-' }}</div>
					</template>
				</el-table-column>
			</el-table>
			<el-table
				v-if="e._prevList && e._prevList.length > 0"
				:data="e._prevList || []"
				border
				class="table">
				<el-table-column label="期数" align="center" width="300px">
					<template slot-scope="scope">
						<div>{{ scope.row && scope.row.periodsNum }}</div>
					</template>
				</el-table-column>
				<el-table-column label="支付日期" align="center">
					<template slot-scope="scope">
						<div>{{ scope.row && scope.row.billingDate }}</div>
					</template>
				</el-table-column>
				<el-table-column label="每期租金（含税）" align="center">
					<template slot-scope="scope">
						<div>
							{{
								format_thousand(scope.row.rentPaymentPerPeriod)
							}}
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import * as apis from '@/api/quota/forecast/edit/api.js';
	export default {
		props: {
			value: {
				required: false,
				default: () => {},
			},
			state: {
				required: false,
			},
			type: {
				required: false,
			},
		},
		dicts: ['quota_plan_payment_frequency_type'],
		components: {},
		data() {
			return {
				list: [],
				loading: false,
			};
		},
		filters: {
			planPaymentFrequencyType(value, list) {
				if (
					value === undefined ||
					value === null ||
					value === '' ||
					list?.length == 0
				)
					return '-';

				let item = list?.find(e => e.value == value);
				if (item) {
					return item.label;
				} else {
					return '-';
				}
			},
		},
		computed: {
			formData: {
				get() {
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			calcSchemeId() {
				return this.$route.query.calcSchemeId;
			},
		},
		created() {},
		mounted() {
			this.getData();
		},
		methods: {
			getTotalPrice(row) {
				let p = 0;

				let monthlyRent = this.numberExcept(
					row?.plan?.planRent,
					row?.plan?.planPaymentFrequencyType,
				);
				if (monthlyRent && row?.plan?.planTenancyType) {
					p =
						this.numberRide(
							monthlyRent,
							row?.plan?.planTenancyType,
						) * 1;
				}
				if (this.value.rentType_raw == '1') {
					return p;
				} else {
					let price =
						p +
						(row?.plan?.planBalancepayment * 1 ?? 0) +
						(row?.plan?.planFirstRent * 1 ?? 0);
					return isNaN(price) ? '-' : price;
				}
			},
			getData() {
				if (this.value.productList?.length == 0) return;
				this.loading = true;
				let params = [];
				this.value.productList?.map(item => {
					params.push({
						planFirstRent: item?.plan?.planFirstRent ?? 0,
						pid: item.sequenceNumber,
						leaseTerm: item.plan?.planTenancyType ?? 0,
						rentPaymentPerPeriod: item.plan.planRent ?? 0,
						paymentDate: this.A_formatTime(
							item.plan.planTimeStart,
							0,
						),
						finalPayment: item?.plan?.planBalancepayment ?? 0,
						planPaymentMethodType:
							item?.plan?.planPaymentMethodType,
						frequency: item?.plan?.planPaymentFrequencyType,
					});
				});
				apis?.RentPaymentPreview(params)
					.then(res => {
						if (res.code == 200) {
							this.formData?.productList?.map(item => {
								if (this.notEmpty(res.data)) {
									for (const [key, value] of Object.entries(
										res.data,
									)) {
										if (item.sequenceNumber == key) {
											let filterValue =
												this._.cloneDeep(value);
											if (
												this.value?.rentType_raw == '1'
											) {
												filterValue = value
													.map(item => {
														if (
															item.periodsNum !==
																'首期租金' &&
															item.periodsNum !==
																'尾款'
														) {
															return item;
														}
													})
													?.filter(e => !!e);
											}

											let index = filterValue?.findIndex(
												e => e?.periodsNum == '合计',
											);
											if (index >= 0) {
												filterValue.splice(index, 1);
											}

											filterValue.push({
												periodsNum: '合计',
												billingDate: '',
												rentPaymentPerPeriod:
													this.getTotalPrice(item),
											});
											item._prevList = filterValue;
										}
									}
								}
							});
						}
					})
					.finally(() => {
						this.loading = false;
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		margin: 20px;
		padding: 20px;
		background-color: #fff;
		border-radius: 8px;
	}
	.table {
		margin-top: 20px;
	}
	.container_item {
		margin-bottom: 50px;
	}
</style>
